<template>
	<div class="userManage">
    <div class="addUser">
      <h1>新增用户</h1>
      <div class="addUser__content">
        用户名：<el-input v-model="userName" placeholder="不用加工作室后缀"></el-input>
        用户类型：
        <el-select v-model="userType" placeholder="请选择">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary">新增用户</el-button>
      </div>
    </div>
    <div class="userList">
      <h1>用户管理列表</h1>
      <el-table
          stripe  border
          :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%">
        <el-table-column
            label="用户名"
            prop="userName">
        </el-table-column>
        <el-table-column
            label="账号创建时间"
            prop="createTime">
        </el-table-column>
        <el-table-column
            label="账号类型"
            prop="userType">
          <template slot-scope="scope">
            <Poptip title="用户类型">
              <span v-model="scope.row.userType">{{scope.row.userType}}</span>
              <div class="api" slot="content" placement="top" >
                <el-select v-model="scope.row.userType" placeholder="请选择">
                  <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
                <el-button type="success" circle><span class="iconfont">&#xe613;</span></el-button>
                <el-button type="danger" circle><span class="iconfont">&#xe715;</span></el-button>
              </div>
            </Poptip>
          </template>
        </el-table-column>
        <el-table-column
            align="right" label="操作">
          <template slot="header" slot-scope="scope">
            <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"/>
          </template>
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">密码重置</el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
	
	</div>
</template>

<script>

export default {
	name:'index',
  data(){
    return{
      options: [{
        value: 'cv',
        label: 'cv'
      }, {
        value: '画本',
        label: '画本'
      }, {
        value: '审听',
        label: '审听'
      }, {
        value: '管理员',
        label: '管理员'
      }, {
        value: '内审',
        label: '内审'
      }],
      userType: '',
      userName:'',
      tableData: [{
        userName:'啦啦啦',
        createTime:'3456',
        userType:'sdasd'
      }, {
        userName:'啦啦啦',
        createTime:'3456',
        userType:'sdasd'
      }, {
        userName:'啦啦啦',
        createTime:'3456',
        userType:'sdasd'
      },{
        userName:'啦啦啦',
        createTime:'3456',
        userType:'sdasd'
      },{
        userName:'啦啦啦',
        createTime:'3456',
        userType:'sdasd'
      },{
        userName:'啦啦啦',
        createTime:'3456',
        userType:'sdasd'
      },{
        userName:'啦啦啦',
        createTime:'3456',
        userType:'sdasd'
      },{
        userName:'啦啦啦',
        createTime:'3456',
        userType:'sdasd'
      }],
      search: ''
    }
  },
	components:{
	},
  methods:{
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  }
};
</script>

<style scoped lang='scss'>
.userManage {
  .addUser {
    .addUser__content{
      display: flex;
      flex-direction: row;
      align-items: center;
      .el-input {
        width: 196px !important;
        margin-right: 20px;
      }
      .el-button{
        margin-left: 40px;
      }
    }
  }

  .userList {
    margin-top: 50px;
    /deep/ .el-table__header .is-leaf{
      color: black;
      font-weight: bold;
      background-color: #e3e4e5;
      text-align: center;
    }
    /deep/ .el-table--enable-row-transition .el-table__body td{
      text-align: center;
    }

    /deep/ .el-input {
      width: 120px !important;
      margin-right: 30px;
    }

    /deep/ .el-button {
      padding: 8px !important;
    }

    /deep/ .ivu-poptip {
      position: fixed;

      .ivu-poptip-rel{
        top: -9px;
        left: -17px;
      }
    }

  }

}
</style>

